<template>
	<view class="navbar">
		<u-navbar :is-back="isback" :title="is_title?'':title" title-color="#000000" back-icon-color="#000000"
			:border-bottom="isBorderBottom" :background="{backgroundColor: $store.state.color}">
			<view class="title" v-if="is_title">
				<view @click="chooseBgImage = !chooseBgImage">
					<text class="title_txt">{{title}}</text>
					<u-icon name="arrow-down" size="28"></u-icon>
				</view>
			</view>
		</u-navbar>
		
		<u-popup v-model="chooseBgImage" mode="top">
			<view class="">
				<u-navbar :is-back="isback" :title="is_title?'':title" title-color="#000000" back-icon-color="#000000"
					:border-bottom="isBorderBottom" :background="{backgroundColor: $store.state.color}">
					<view class="title" v-if="is_title">
						<view @click="chooseBgImage = !chooseBgImage">
							<text class="title_txt">{{title}}</text>
							<u-icon name="arrow-down" size="28"></u-icon>
						</view>
					</view>
				</u-navbar>
				<view class="change_bgimage">
					<view class="color_list" v-for="(item,index) in colorList" :key="index"
						@click="checkedColor(item,index)">
						<view class="color_txt" :style="{background: item.color}"></view>
						<u-icon name="checkbox-mark" :color="item.color" size="32" v-if="index == colorIndex"></u-icon>
					</view>
				</view>
			</view>
			
		</u-popup>

	</view>
</template>

<script>
	export default {
		name: "navbar",
		props: ["isback", "title", "is_title"],
		data() {
			return {
				isBorderBottom: false,
				chooseBgImage: false,
				background: {
					// backgroundColor: this.$store.state.color,

					// 导航栏背景图
					// background: 'url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6e1a92c2-19ad-4ad9-ba4a-caf65b14a00b/03fe6c73-35b2-495e-ab68-22353c27254e.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',

					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, #c5dde3, #d1ecdf)'
				},
				colorList: [{
						color: '#c5dde3'
					},
					{
						color: '#666666'
					},
					{
						color: '#F0AD4E'
					},
					{
						color: '#0384be'
					},
					{
						color: '#f15a22'
					}
				],
				colorIndex: this.$store.state.colorIndex,
			};
		},
		methods: {
			checkedColor(item, index) {
				this.colorIndex = index;
				this.$store.state.colorIndex = index;
				this.$store.state.color = item.color;
				this.$emit("change",item.color);
			},
		}
	}
</script>

<style>
	.title {
		width: 100%;
		display: flex;
		display: -webkit-box;
		justify-content: center;
		align-items: center;
		padding-left: 98rpx;
	}

	.title_txt {
		color: #000000;
		font-size: 32rpx;
		font-weight: normal;
		margin-right: 10rpx;
	}

	.change_bgimage {
		/* position: fixed;
		z-index: 1000; */
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 20rpx;
	}

	.color_list {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;
		border-radius: 10rpx;
	}

	.color_txt {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50rpx;
	}

</style>
